@charset "utf-8" ;
@function r($px)
{
    @return $px/40*1rem    
}
.family_web
{
    width: 100%;
    overflow: hidden;
    .middle
    {
        width: 100%;
        height: r(540);
        background: #8bc01f;
        margin-top: 3.5%;
        position: relative;
        overflow: hidden;
        .pic
        {
            position: absolute;
            top: r(80);
            right: r(200);
            img
            {
                width: 90%;
            }
        }
        .box
        {
            padding-top: r(66);
            width: 80%;
            margin: auto;
            .samll_box
            {
                div
                {
                    display: inline-block;
                    text-align: center;
                    padding-top: r(7);
                    color: white;
                }
                .text
                {
                    width:r(55) ;
                    height: r(55);
                    background: #ffffff;
                    border-radius: 5px;
                    color: #8bc01f;
                }
                .text2
                {
                    h1
                    {
                        padding-left: r(15);
                    }
                }
                h3
                {
                    color: white;
                    padding-top: r(25);
                    padding-left: r(15);
                    padding-bottom: r(30);
                }
                p
                {
                    color: white;
                    padding-top: r(5);
                    padding-left: r(15);
                }
            }
            .samll_box2
            {
                padding-top: r(30);
                p
                {
                    color: white;
                    padding-top: r(5);
                    padding-left: r(15);
                }
                .ipt
                {
                    width: r(100);
                    height: r(35);
                    background: #e8f2d2;
                    border-radius: 5px;
                    color: #8bc01f;
                    text-align: center;
                }
            }
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle
        {
            width: 100%;
            height: r(2500);
            background: #8bc01f;
            margin-top: 15.5%;
            position: relative;
            overflow: hidden;
            .pic
            {
                position: absolute;
                top: r(1550);
                left: r(90);
                img
                {
                    width: 110%;
                }
            }
            .box
            {
                padding-top: r(200);
                width: 90%;
                margin: auto;
                .samll_box
                {
                    div
                    {
                        display: inline-block;
                        text-align: center;
                        padding-top: r(7);
                        color: white;
                    }
                    .text
                    {
                        width:r(150) ;
                        height: r(150);
                        background: #ffffff;
                        border-radius: 5px;
                        color: #8bc01f;
                    }
                    .text2
                    {
                        h1
                        {
                            padding-left: r(15);
                            padding-bottom: r(80);
                        }
                    }
                    h3
                    {
                        color: white;
                        padding-top: r(25);
                        padding-left: r(15);
                        padding-bottom: r(30);
                    }
                    p
                    {
                        color: white;
                        padding-top: r(5);
                        padding-left: r(15);
                    }
                }
                .samll_box2
                {
                    padding-top: r(30);
                    p
                    {
                        color: white;
                        padding-top: r(5);
                        padding-left: r(15);
                    }
                    .ipt
                    {
                        margin-top: r(50);
                        width: r(500);
                        height: r(105);
                        background: #e8f2d2;
                        border-radius: 5px;
                        color: #8bc01f;
                        text-align: center;
                    }
                }
            }
        }
    }
    .middle2
    {
        width: 100%;
        height: r(600);
        position: relative;
        overflow: hidden;
        background: #3393df;
        .pic
        {
            position: absolute;
            top: 25%;
            left: 13%;
        }
        .pic2
        {
            position: absolute;
            top:43%;
            right: 15%;
        }
        .box
        {
            padding-top: r(66);
            width: 80%;
            margin: auto;
            color: white;
            .samll_box
            {
                div
                {
                    display: inline-block;
                    text-align: center;
                    padding-top: r(7);
                    color: white;
                }
                .text
                {
                    width:r(55) ;
                    height: r(55);
                    background: #ffffff;
                    border-radius: 5px;
                    color: #3393df;
                }
                .text2
                {
                    h1
                    {
                        padding-left: r(15);
                    }
                }
            }
        }
    }
    @media only screen and (max-width:768px)
    {
        .middle2
        {
            width: 100%;
            height: r(3800);
            position: relative;
            overflow: hidden;
            background: #3393df;
            .pic
            {
                position: absolute;
                top: 8%;
                left: 5%;
            }
            .pic2
            {
                position: absolute;
                top:72.7%;
                left: 5%;
            }
            .box
            {
                padding-top: r(66);
                width: 90%;
                margin: auto;
                color: white;
                .samll_box
                {
                    div
                    {
                        display: inline-block;
                        text-align: center;
                        padding-top: r(7);
                        color: white;
                    }
                    .text
                    {
                        width:r(150) ;
                        height: r(150);
                        background: #ffffff;
                        border-radius: 5px;
                        color: #3393df;
                    }
                    .text2
                    {
                        h1
                        {
                            padding-left: r(15);
                        }
                    }
                }
                .samll_box2
                {
                    .inside_box
                    {
                        margin-top: 100%;
                    }
                }
            }
        }
    }
    .middle3
    {
        .box
        {
            width: 80%;
            margin: auto;
            .bigson
            {
                padding: 15px;
                .son1
                {
                    div
                    {
                        display: inline-block;
                        text-align: center;
                        padding-top: r(100);
                        color:#3393df;
                        margin-bottom:r(25);
                    }
                    .text
                    {
                        
                        h1
                        {
                            width:r(55) ;
                            height: r(55);
                            background: #3393df;
                            border-radius: 5px;
                            color: #FFFFFF;
                            padding-top: r(7);
                            
                        }
                    }
                    .text2
                    {
                        
                        h1
                        {
                            color: #3393df;
                            padding-top: r(7);
                            margin-left: r(15);
                        }
                    }
                }
                .son2
                {
                    margin-bottom: r(36);
                    
                }
                .son3
                {
                    margin-bottom: r(20);
                    color: #3393df;
                }
                .son5
                {
                    margin-bottom: r(52);
                    text-indent: 36px;
                }
                .son4
                {
                    margin-bottom: r(32);
                    text-indent: 36px;
                }
                .son6
                {
                    .pic
                    {
                        display: block;
                        text-align: center;
                        margin-bottom: r(80);
                    }
                }
                
            }
        }
    }
    .middle4
    {
        background: #f7f7f7;
    }
    @media only screen and (max-width:768px)
    {
        .middle3
        {
            .box
            {
                width: 90%;
                margin: auto;
                .bigson
                {
                    padding: 15px;
                    .son1
                    {
                        div
                        {
                            display: inline-block;
                            text-align: center;
                            padding-top: r(100);
                            color:#3393df;
                            margin-bottom:r(25);
                        }
                        .text
                        {
                            
                            h1
                            {
                                width:r(150) ;
                                height: r(150);
                                background: #3393df;
                                border-radius: 5px;
                                color: #FFFFFF;
                                padding-top: r(7);
                                
                            }
                        }
                        .text2
                        {
                            
                            h1
                            {
                                color: #3393df;
                                padding-top: r(7);
                                margin-left: r(15);
                                padding-bottom: r(50);
                            }
                        }
                    }
                    .son2
                    {
                        margin-bottom: r(100);
                        
                    }
                    .son3
                    {
                        margin-bottom: r(60);
                        color: #3393df;
                    }
                    .son5
                    {
                        margin-bottom: r(52);
                        text-indent: 36px;
                    }
                    .son4
                    {
                        margin-bottom: r(100);
                        text-indent: 36px;
                    }
                    .son6
                    {
                        .pic
                        {
                            display: block;
                            text-align: center;
                            margin-bottom: r(80);
                        }
                    }
                    
                }
            }
        }
    }
    .foot
    {
        width: 100%;
        background: #3b3b3b;
        padding-top: 3%;
        padding-bottom: 3%;
        .inside_foot
        {
            
            width: 80%;
            margin: auto;
            background: #3b3b3b;
            .col-md-6,.col-xs-4
            {
                color: #a1a3ab;
                .col-md-2,.col-xs-3
                {
                    padding: 0;
                    
                }
            }
            
              
        } 
    }
    @media only screen and (max-width:768px)
    {
        .foot
        {
            width: 100%;
            background: #3b3b3b;
            padding-top: 3%;
            padding-bottom: 3%;
            .inside_foot
            {
                width: 95%;
                margin: auto;
                background: #3b3b3b;
                font-size:xx-small ;
                padding: 0;
                .col-md-6,.col-xs-4
                {
                    color: #a1a3ab;
                    padding-top: 10px;
                    padding-bottom: 5px;
                    .col-md-2,.col-xs-3
                    {
                        padding: 0;
                        
                    }    
                }
            } 
        }    
    }
}
